<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="/WEB-INF/templates/default.xhtml">
	<ui:define name="content">
	
	 <h:outputStylesheet>
        .ecol1 {
        vertical-align: top;
        padding-right: 25px
        }
 
        .ecol2 {
        vertical-align: top;
        border-left: #ACBECE 1px solid;
        padding-left: 10px
        }
 
        .rich-calendar-tool-btn {
        font-family: Arial, Verdana;
        }
    </h:outputStylesheet>
    <h:form>
 
        <h:panelGrid id="panel" columns="2" columnClasses="ecol1, ecol2">
            <a4j:outputPanel layout="block">
                <rich:calendar value="#{myAction.calendarModelItem.selectDate}" id="calendar" locale="#{myAction.calendarModelItem.locale}"
                    popup="#{myAction.calendarModelItem.popUp}" datePattern="#{myAction.calendarModelItem.pattern}"
                    showApplyButton="#{myAction.calendarModelItem.showApply}" cellWidth="24px" cellHeight="22px" style="width:200px"
                    disabled="#{calendarBean.disabled}">
                </rich:calendar>
            </a4j:outputPanel>
            <a4j:region>
                <h:panelGrid columns="2">
                    <h:outputText value="Disabled:" />
                    <h:selectBooleanCheckbox value="#{myAction.calendarModelItem.disabled}">
                        <a4j:ajax event="click" render="calendar @this" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="Popup Mode:" />
                    <h:selectBooleanCheckbox value="#{myAction.calendarModelItem.popUp}">
                        <a4j:ajax event="click" render="calendar @this" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="Apply Button:" />
                    <h:selectBooleanCheckbox value="#{myAction.calendarModelItem.showApply}">
                        <a4j:ajax event="click" render="calendar @this" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="Select Locale" />
                    <h:selectOneRadio value="en/US" valueChangeListener="#{myAction.calendarModelItem.selectLocale}" >
                        <a4j:ajax event="click" render="calendar @this" />
                        <f:selectItem itemLabel="US" itemValue="en/US" />
                        <f:selectItem itemLabel="DE" itemValue="de/DE" />
                        <f:selectItem itemLabel="FR" itemValue="fr/FR" />
                        <f:selectItem itemLabel="RU" itemValue="ru/RU" />
                    </h:selectOneRadio>
 
                    <h:outputText value="Select Date Pattern:" />
                    <h:selectOneMenu value="#{myAction.calendarModelItem.pattern}">
                        <a4j:ajax event="change" render="calendar @this" />
                        <f:selectItem itemLabel="d/M/yy HH:mm" itemValue="d/M/yy HH:mm" />
                        <f:selectItem itemLabel="dd/M/yy hh:mm a" itemValue="dd/M/yy hh:mm a" />
                        <f:selectItem itemLabel="d/MMM/y" itemValue="d/MMM/y" />
                        <f:selectItem itemLabel="MMM d, yyyy" itemValue="MMM d, yyyy" />
                    </h:selectOneMenu>
 
                </h:panelGrid>
            </a4j:region>
        </h:panelGrid>
    </h:form>
	
	
	</ui:define>
</ui:composition>
